<template>
    <div class="home">
        <van-nav-bar
            title="智慧鱼缸"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="home-content">
            <p class="home-content-area-text">
                视频监控
            </p>
            <Video :ipaddr="this.ipaddr"/>
            <p class="home-content-area-text">
                基本信息
            </p>
            <transition-group tag="ul" class="home-content-info">
                <li class="home-content-info-item" @click="onDevices(item, index)" 
                v-for="(item, index) in infoData" :key="item.homeContent">
                    <div class="home-content-info-item-title">
                            <p class="home-content-info-item-title-name">{{item.name}}</p>
                        </div>
                    <p class="home-content-info-item-data">{{item.data}}</p>
                </li>
            </transition-group>
            <p class="home-content-area-text">
                设备控制
            </p>
            <div class="home-content-control">
                <van-cell-group style="height: 100%;">
                <!-- <van-cell center size="large" :label="deviceData.mode===true?'自动':'手动'"  title="模式选择">
                    <template #right-icon>
                        <van-switch v-model="deviceData.mode" size="24" @change="onModeChange(deviceData)" :loading="deviceData.mload" />
                    </template>
                </van-cell> -->
                <van-cell center size="large" :label="deviceData.ledState===true?'开启':'关闭'" title="灯光开关">
                    <template #right-icon>
                        <van-switch v-model="deviceData.ledState" :loading="deviceData.gload" @change="onledChange(deviceData)" :disabled="deviceData.mode===true?true:false" size="24" />
                    </template>
                </van-cell>
                <van-collapse v-model="activeNames">
                    <van-collapse-item size="large" title="灯光颜色" name="1">
                        <colorPicker style="height:270px" v-model="color" @change="onc" />
                    </van-collapse-item>
                </van-collapse>

                <van-cell center size="large" :label="deviceData.relay2State===true?'开启':'关闭'" title="过滤器开关">
                    <template #right-icon>
                        <van-switch v-model="deviceData.relay2State" :loading="deviceData.gload" @change="onrelay2Change(deviceData)" :disabled="deviceData.mode===true?true:false" size="24" />
                    </template>
                </van-cell>
                <van-cell center size="large" :label="deviceData.relay3State===true?'开启':'关闭'" title="增氧泵开关">
                    <template #right-icon>
                        <van-switch v-model="deviceData.relay3State" :loading="deviceData.gload" @change="onrelay3Change(deviceData)" :disabled="deviceData.mode===true?true:false" size="24" />
                    </template>
                </van-cell>
                <van-cell center size="large" :label="deviceData.relay1State===true?'开启':'关闭'" title="水加热开关">
                    <template #right-icon>
                        <van-switch v-model="deviceData.relay1State" :loading="deviceData.gload" @change="onrelay1Change(deviceData)" :disabled="deviceData.mode===true?true:false" size="24" />
                    </template>
                </van-cell>
                <!-- <van-divider>水温阈值</van-divider>
                <van-slider v-model="deviceData.setA" @change="onAChange(deviceData)" :disabled="deviceData.sload" active-color="#0aadee">
                    <template #button>
                    <div class="custom-button">{{ deviceData.setA }}</div>
                    </template>
                </van-slider>
                <van-divider>水质过滤阈值</van-divider>
                <van-slider v-model="deviceData.setA" @change="onAChange(deviceData)" :disabled="deviceData.sload" active-color="#0aadee">
                    <template #button>
                    <div class="custom-button">{{ deviceData.setA }}</div>
                    </template>
                </van-slider> -->
                </van-cell-group>
            </div>
        </div>
    </div>    
</template>

<script>
import mqtt from 'mqtt';
import Video from './Video.vue'
var client
const options = {
    connectTimeout: 40000,
    clean: true
  }
  client = mqtt.connect('ws://121.5.58.100:8083/mqtt', options)

export default {
    name: 'fishMain',
    components: {
        Video
    },
    created: function() {
        this.mqttMsg()
    }, 
    data: function () {
        return {
            activeNames: [],
            color: '',
            ipaddr: '',
            user: '--',
            res: '',
            send: '',
            sendLed: '',
            sendRelay: '',
            data: '',
            key: '',
            flag: '',
            flag1: 1,
            deviceData: {
                mode: '',
                setA: 0,
                ledState: '',
                relay1State: '',
                relay2State: '',
                relay3State: ''
            },
            infoData: [
                {
                    // Icon: require('@img/ADD1.svg'),
                    name: "水温",
                    data: "--"
                },
                {
                    // Icon: require('@img/ADD1.svg'),
                    name: "室温",
                    data: "--"
                },
                {
                    // Icon: require('@img/ADD1.svg'),
                    name: "湿度",
                    data: "--"
                },
                {
                    // Icon: require('@img/ADD1.svg'),
                    name: "水质",
                    data: "--",
                },
            ],
        }
    },
    methods: {
        onc() {
            client.publish('Fish/control',this.hexToRgb(this.color))
            console.log(JSON.parse(this.hexToRgb(this.color)))
        },
        hexToRgb(hex) {
        return '{"code":{"RGB":{ "R": ' + parseInt('0x' + hex.slice(1, 3)) + ',"G": ' + parseInt('0x' + hex.slice(3, 5))
                + ',"B": ' + parseInt('0x' + hex.slice(5, 7)) + '}}}';
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        onledChange() {
            console.log(this.deviceData.ledState)
            if(this.deviceData.ledState===true) {
                client.publish('Fish/control','{"code":"ledOn"}')
            }
            else {
                client.publish('Fish/control','{"code":"ledOff"}')
            }
        },
        onrelay1Change(deviceData) {
            console.log(deviceData)
            if(this.deviceData.relay1State===true) {
                client.publish('Fish/control','{"code":"relay1On"}')
            }
            else {
                client.publish('Fish/control','{"code":"relay1Off"}')
            }
        },
        onrelay2Change(deviceData) {
            console.log(deviceData)
            if(this.deviceData.relay2State===true) {
                client.publish('Fish/control','{"code":"relay2On"}')
            }
            else {
                client.publish('Fish/control','{"code":"relay2Off"}')
            }
        },
        onrelay3Change(deviceData) {
            console.log(deviceData)
            if(this.deviceData.relay3State===true) {
                client.publish('Fish/control','{"code":"relay3On"}')
            }
            else {
                client.publish('Fish/control','{"code":"relay3Off"}')
            }
        },
        mqttMsg() {
        client.on('connect', () => {
          console.log("连接成功！！！")
          client.subscribe('Fish/info',{ qos: 0 }, (error) => {
            if (!error) {
              console.log('订阅成功')
            } else {
              console.log('订阅失败')
            }
          })
        })
        // 接收消息处理
        client.on('message', (topic, message) => {
          console.log(message.toString())   //控制台显示接收到的数据
          this.data = message.toString()
          this.res = JSON.parse(message.toString())
          this.infoData[0].data = this.res.temp-5+'°C'
          this.infoData[1].data = this.res.temp+'°C'
          this.infoData[2].data = this.res.hum+'%'
          this.infoData[3].data = this.res.tds + 'ppm'
          this.deviceData.ledState = this.res.led===1?true:false,
          this.deviceData.relay1State = this.res.relay1===0?true:false,
          this.deviceData.relay2State = this.res.relay2===0?true:false,
          this.deviceData.relay3State = this.res.relay3===0?true:false,
          this.ipaddr = 'http://'+this.res.ip+':8081'
        //   this.devicesData[4].data = this.res.gas===0?"气体泄漏":"正常"
        //   this.devicesData[5].data = this.res.led===1?"打开":"关闭"
        //   this.ipaddr = 'http://'+this.res.ip+':8081'
        })
      },
      onDevices: function(item, index) {
        if(index === 5) {
            this.sendLed = this.res.led===0?"ledOn":"ledOff"
            this.send = '{"code":"'+this.sendLed+'","temp": "'+this.res.temp+'","ip": "'+this.res.ip+'", "rain": "'+this.res.rain+'", "hum": "'+this.res.hum+'", "LED": "'+this.res.temp+'", "fire": "'+this.res.fire+'","gas": "'+this.res.gas+'",  "led": "'+this.res.led+'"}'
            client.publish('House', this.send)
            
        }
      },
    }
}
</script>

<style lang="scss" scoped>
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }

    .v-enter-active,
    .v-leave-to {
        transition: all 0.6s ease;
    }

    /* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
    .v-move {
        transition: all 0.6s ease;
    }

    .v-leave-to {
        position: absolute;
    }
    .home {
        width: 100%;
        height: 100%;
        overflow: auto;
        display: flex;
        flex-flow: column;
        position: absolute;
        &-content {
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: left;
            justify-content: left;
            transition: .3s;
            overflow: auto;
            &-control {
                border-radius: 20px;
                margin-top: 0px;
                margin-left: 20px;
                margin-right: 20px;
                margin-bottom: 20px;
            }
            &-area {
                &-text {
                    margin-left: 20px;
                    font-size: 5vw;
                    color: white;
                    font-weight: 900;
                }
            }
            &-text {
                margin: px2rem(20);
                font-size: px2rem(30);
                color: white;
                font-weight: 600;
                margin-bottom: px2rem(30);
            }
            &-shebei {
                margin-left: px2rem(20);
                margin-bottom: px2rem(5);
                font-size: px2rem(14);
                color: white;
                font-weight: 400;
            }
            &-info {
                transition: .5s;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0 15px;
                &-item {
                    transition: .5s;
                    margin: 5px;
                    text-align: center;
                    padding: 5px;
                    border-radius: 20px 20px 20px 20px;
                    // box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
                    width: calc(50% - 20px);
                    height: calc(50% - 10px);
                    display: flex;
                    position: relative;
                    flex-direction: column;
                    justify-content: left;
                    background-color: rgba(255, 255, 255, 0.9);
                    background-attachment: fixed;
                    &-title {
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                    &-name {
                        margin: auto;
                        transition: .5s;
                        text-align: left;
                        color: black;
                        //margin-top: 0;
                        font-size: 4vw;
                    }
                }
                
                &-data {
                    transition: .5s;
                    // text-align: right;
                    color: black;
                    margin: auto;
                    font-size: 10vw;
                    font-weight: 500;
                }
            }

        }
    }
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
